<template>
  <!-- <div>限时购列表</div> -->

  <div class="shop">
    <div class="top">
      <el-button size="small" type="primary" @click="isShowAddCategory = true">限时购设置</el-button>

      <el-button class="search" size="small" type="primary" @click="searchCategoryData">搜索</el-button>

      <el-input
        class="search input"
        size="small"
        v-model="form.cate_id"
        placeholder="输入id查询"
        clearable
      ></el-input>
      <el-input
        class="search input"
        size="small"
        v-model="form.cate_name"
        placeholder="输入分类名称查询"
        clearable
      ></el-input>
    </div>

    <el-table
      :data="tableData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column label="专场ID" prop="id" width="100"></el-table-column>
      <el-table-column label="专场日期" prop="id" width="100"></el-table-column>
      <el-table-column label="时间段" prop="relation_product_count" width="140"></el-table-column>
      <el-table-column label="专场T图">
        <template slot-scope="scope">
          <div class="img">
            <img
              style="width:50px;height: 50px"
              :src="scope.row.icon ? scope.row.icon : errorImg"
              alt
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="关联商品数" prop="relation_product_count" width="140"></el-table-column>
      <el-table-column label="专场状态" prop="relation_product_count" width="140"></el-table-column>
      <el-table-column label="操作" fixed="right" width="350">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="changeShopCate(scope.row)">编辑</el-button>
          <el-button size="mini" @click="deleteShopCate(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="form.size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>

    <jdialog title="新增限时专场" :visible.sync="isShowAddCategory" width="640px">
      <el-form :model="cateForm" :rules="rules" class="demo-ruleForm" label-width="140px">
        <el-form-item label="选择日期" prop="img_url">
          <el-date-picker v-model="cateForm.dateValue" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>

        <el-form-item label="选择时间段" prop="img_url">
          <el-time-select
            v-model="cateForm.timeValue"
            :picker-options="{
    start: '00:00',
    step: '01:00',
    end: '24:00'
  }"
            placeholder="选择时间"
          ></el-time-select>
        </el-form-item>

        <el-form-item label="分类专场图片：" prop="img_url">
          <uploadImg
            flieName="img_url"
            class="icon_cate"
            :oldImgs="[cateForm.img_url]"
            :n="1"
            @getFile="getFile"
          ></uploadImg>
          <p class="note">支持png、jpg格式照片，大小不能超过1M</p>
        </el-form-item>
        <el-form-item label="跳转商品ID：">
          <el-input
            v-model="cateForm.jump_link"
            style="width:320px;"
            size="mini"
            placeholder="请输入跳转商品ID"
          ></el-input>
        </el-form-item>
      </el-form>

      <div class="align">
        <el-button size="mini" @click="isShowAddCategory = false">取消</el-button>
        <el-button size="mini" type="primary" @click="certainAddCategory">确定</el-button>
      </div>
    </jdialog>
  </div>
</template>


<script>
// import uploadImg from "@/components/uploadImg";
// import {
//   supplyproductCateList,
//   productCateCreate,
//   productCateIdDelete,
//   productCateIDUpdate
// } from "@/api/autarky";

export default {
  components: {
    // uploadImg
  },
  data() {
    return {
      isShowAddCategory: false,
      showCate_id: "",

      form: {
        cate_id: "",
        cate_name: "",
        icon: "",
        page: 1,
        size: 20
      },

      total: 0,
      tableData: [],

      cateForm: {
        dateValue: "",
        timeValue: "",
        cate_name: "",
        icon: "",
        order_sort: "",
        img_url: "",
        jump_link: "",
        is_enable: "0"
      },
      rules: {
        cate_name: [
          { required: true, message: "请输入商品分类名称", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" }
        ],
        order_sort: [
          { required: true, message: "请输入商品分类排序", trigger: "blur" }
        ],
        img_url: [{ message: "请上传分类专场图片", trigger: "blur" }],
        icon: [{ required: true, message: "请上传分类图标", trigger: "blur" }]
      },

      modifyForm: {
        cate_name: "",
        icon: "",
        order_sort: "",
        img_url: "",
        jump_link: "",
        is_enable: ""
      },
      modelrules: {
        cate_name: [
          { required: true, message: "请输入商品分类名称", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" }
        ],
        order_sort: [
          { required: true, message: "请输入商品分类排序", trigger: "blur" }
        ],
        img_url: [{ message: "请上传分类专场图片", trigger: "blur" }],
        icon: [{ required: true, message: "请上传分类图标", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.getsupplyproductCateListData();
  },
  methods: {
    //搜索数据
    searchCategoryData() {
      this.getsupplyproductCateListData();
    },
    pageChange(page) {
      this.form.page = page;
      //获取更多数据
      this.getsupplyproductCateListData();
    },

    //修改商品分类
    changeShopCate(data) {
      this.showCate_id = data.id;
      this.modifyForm = {
        cate_name: data.cate_name,
        order_sort: data.order_sort,
        icon: data.icon,
        img_url: data.img_url,
        jump_link: data.jump_link,
        is_enable: data.is_enable + ""
      };
      this.isShowAddCategory = true;
    },
    //跳转销售日志
    gotoSaleDaily(id) {
      console.log(id);
      this.$router.push({
        path: "./privateorderlist",
        query: { cate_id: id }
      });
    },
    //删除商品分类
    deleteShopCate(id) {
      this.$confirm("确认删除该商品分类？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          this.getproductCateIdDeleteData(id);
        })
        .catch(() => {
          console.log("cancel");
        });
    },
    //确定新增分类
    certainAddCategory() {
      this.getproductCateCreateData();
    },
    //确定修改分类
    certainModifyCategory() {
      this.getproductCateIDUpdateData();
    },
    //获取商品分类列表数据
    async getsupplyproductCateListData() {
      var url =
        "id=" +
        this.form.cate_id +
        "&cate_name=" +
        this.form.cate_name +
        "&page=" +
        this.form.page +
        "&is_enable=";
      let res = await supplyproductCateList(url);
      if (res.code === 10000) {
        this.tableData = res.data.data;
        this.total = res.data.total;
      } else {
        this.$message.error(res.message);
      }
    },

    //新增商品分类
    async getproductCateCreateData() {
      let res = await productCateCreate(this.cateForm);
      if (res.code === 10000) {
        this.cateForm = {};
        this.$message.success(res.message);
        this.getsupplyproductCateListData();
        this.isShowAddCategory = false;
      } else {
        this.$message.error(res.message);
      }
    },
    //修改商品分类
    async getproductCateIDUpdateData() {
      let res = await productCateIDUpdate(this.showCate_id, this.modifyForm);
      if (res.code === 10000) {
        this.modifyForm = {};
        this.showCate_id = "";
        this.$message.success(res.message);
        this.getsupplyproductCateListData();
        this.isShowAddCategory = false;
      } else {
        this.$message.error(res.message);
      }
    },
    //删除商品分类
    async getproductCateIdDeleteData(cate_id) {
      console.log(cate_id);
      let res = await productCateIdDelete(cate_id);
      if (res.code === 10000) {
        this.$message.success(res.message);
        this.getsupplyproductCateListData();
      } else {
        this.$message.error(res.message);
      }
    },
    getFile(file) {
      this.cateForm[file.name] = file.files.length > 0 ? file.files[0].url : "";
    },

    getModifyFile(file) {
      this.modifyForm[file.name] =
        file.files.length > 0 ? file.files[0].url : "";
    },
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;

  .top {
    margin-bottom: 20px;

    .search {
      float: right;
      margin-left: 12px;
    }

    .input {
      width: 150px;
    }
  }

  .cetain {
    color: #f4222d;
  }

  .pagination {
    float: right;
    margin-top: 12px;
  }

  .icon_cate {
    float: left;
  }

  .demo-ruleForm {
    padding: 20px;
  }

  .note {
    color: #666666;
    font-size: 14px;
    margin-top: 28px;
  }

  .align {
    text-align: center;
    margin-bottom: 20px;
  }
}
</style>
